<template>
  <div class="page">
    <div class="home">
      <div class="resume_box" :class="{ 'box-height': isOpen }">
        <div class="resume_head">
          <dl class="left_box" :style="{backgroundColor: cColor}">
            <dt>{{ resumeData.tac.title }}</dt>
            <dd><span>Personal resume</span><p>{{resumeData.tac.slogan}}</p></dd>
          </dl>
        </div>
        <div class="resume_content_all">
          <div class="resume_content" 
            v-for="(item, index) in resumeData.list"
            :key="index"
            :id="item.id"
            :class="{ none: item.isDisabled }">
            <div class="resume_content_main" style="padding-top: 10px; padding-bottom: 6px;" v-if="item.project">
              <!-- {{item}} -->
              <div class="module_tit" :style="{backgroundColor: cColor}">{{item.name}}</div>
              <div class="line_box2"></div>
              <!-- {{ item.idName }} -->
              <template v-if="item.idName === 'basicInfo'">
                <div class="basic_info_box">
                  <ul class="basic_info_list" style="font-size: 13px;">
                    <li v-if="item.project && item.project.titleName"><span>姓　　名</span>： {{ item.project.titleName }}</li>
                    <li v-if="item.project && item.project.roleName"><span>联系电话</span>： {{item.project.roleName}}</li>
                    <li v-if="item.project && item.project.emails"><span>邮　　箱</span>： {{item.project.emails}}</li>
                    <li v-if="item.project && item.project.years"><span>工作年限</span>： {{item.project.years}}年</li>
                    <li v-if="item.project && item.project.school"><span>学　　校</span>： {{item.project.school}}</li>
                    <li v-if="item.project && item.project.entryTime"><span>入职时间</span>： {{item.project.entryTime}}</li>
                    <li v-if="item.project && item.project.gitAddress"><span>GIT地址</span>： {{item.project.gitAddress}}</li>
                  </ul>
                </div>
              </template>
              <template v-if="item.idName === 'jiaoyu'">
                <div class="content_list" style="margin-top: 10px">
                  <ul class="list_top" :style="{color: cColor}">
                    <li>2010.09 ~ 2013.06</li>
                    <li class="name">无锡职业技术学院</li>
                    <li>电子信息与技术</li>
                    <li>大专学历</li>
                  </ul>
                </div>
              </template>
              <template v-if="item.idName === 'jineng' || item.idName === 'evaluate'">
                <div class="ql-editor" style="font-size: 13px; line-height: 1.7;" v-if="item.project && item.project.value && item.project.value.value">
                  <ul v-html="item.project.value.value"></ul>
                </div>
              </template>
              <template v-if="item.idName !== 'jineng' && item.idName !== 'basicInfo'">
                <div class="content_list" style="margin-top: 10px" 
                  v-for="(cons, idx) in item.project"
                  :key="idx">
                  <ul class="list_top" :style="{color: cColor}">
                    <li v-if="cons.time">{{cons.time}}</li>
                    <li class="name" v-if="cons.titleName">{{cons.titleName}}</li>
                    <li v-if="cons.roleName">{{cons.roleName}}</li>
                  </ul>
                  <div class="ql-editor" style="font-size: 13px; line-height: 1.7;">
                    <ul v-html="cons.content"></ul>
                  </div>
                </div>  
              </template>
              
            </div>
          </div>
        </div>
      </div>
      <resume-editor  @input-action="workAction" @edit-show="editShowAction" :rList="resumeData.list"
        @change-tab="changeTabAction"
        ></resume-editor>
    </div>
    <m-aside @save="eidtSaveStorage" :data="resumeData.tac"
      @change-color="changeColorAction" />
  </div>
</template>

<script setup>
import { reactive, ref, onMounted, computed } from 'vue';
import resumeEditor from '@/components/ncom/Editor';
import mAside from '@/components/Aside';
import { RESUME_CONFIG } from '@/utils/config';

let timeout = 30;
let timer = null;
const isOpen = ref(false);

let resumeData = reactive({
  list: RESUME_CONFIG,
  tac: { title: '个人简历', slogan: '我一直在努力成为更好的自己', color: 'rgb(96, 122, 157)' },
});

const cColor = computed(() => resumeData.tac.color);


const printAction = () => {
  window.print();
};

const editShowAction = (value) => {
  isOpen.value = value;
};

const workAction = (res) => {
  if (res.type === 'basicInfo') {
    resumeData.list[0].project = res;
  }
  if (res.type === 'jineng') {
    resumeData.list[1].idName = 'jineng';
    resumeData.list[1].project = res;
  }
  if (res.type === 'work') {
    resumeData.list[2].project = res.list;
  }
  if (res.type === 'project') {
    resumeData.list[3].project = res.list;
  }
  if (res.type === 'evaluate') {
    resumeData.list[4].project = res;
  }
};

const changeTabAction = (index) => {
  resumeData.list[index].isDisabled = !resumeData.list[index].isDisabled;
};

const eidtSaveStorage = () => {
  window.localStorage.setItem('RESUME_DATA', JSON.stringify(resumeData));
};

const changeColorAction = (color) => {
  resumeData.tac.color = color;
};

onMounted(() => {
  let dr = window.localStorage.getItem('RESUME_DATA');
  let titleAndColor = window.localStorage.getItem('TITLE_AND_COLOR');
  if (dr) {
    dr = JSON.parse(dr);
    resumeData.list = dr?.list || RESUME_CONFIG;
    resumeData.tac = dr?.tac || {
      title: '个人简历', slogan: '我一直在努力成为更好的自己', color: 'rgb(96, 122, 157)',
    };
  }
});

</script>

<style>
.page {
  justify-content: center;
  position: relative;
  min-height: 100vh;
  background: #39394d;
}
.home {
  width: 820px;
  background-color: #fff;
  -webkit-box-shadow: 0 0 6px rgb(0 0 0 / 10%);
  box-shadow: 0 0 6px rgb(0 0 0 / 10%);
  position: relative;
  z-index: 1;
  margin: auto;
}
.resume_box {
  position: relative;
  padding-bottom: 10px;
  /* min-height: 1150px; */
  min-height: 100vh;
  color: #333;
  background-color: #fff;
}
.resume_head {
  padding: 10px 0 0;
  height: 66px;
}
.left_box {
  float: left;
  min-width: 56%;
  color: #fff;
  padding: 15px 40px;
  overflow: hidden;
  background-color: #607a9d;
  border-radius: 0 35px 35px 0;
}
.left_box dd {
  float: left;
  line-height: 18px;
  font-size: 18px;
  padding-left: 15px;
  font-size: 14px;
}
.left_box dl p {
  font-size: 12px;
  text-shadow: none;
}
.left_box dt {
  float: left;
  font-size: 32px;
  border-right: 1px solid #fff;
  height: 36px;
  line-height: 36px;
  padding-right: 15px;
}
.resume_content_all {
  padding-top: 5px;
  margin: 0px 30px 0px 40px;
  border-left: 2px solid #ddd;
}
.resume_content_all .resume_content {
  padding-top: 28px;
  position: relative;
  font-size: 14px;
}
.resume_content_all .resume_content.none {
  display: none;
}
.resume_content_all .resume_content_main {
    padding-top: 10px;
    padding-bottom: 6px;
    padding: 20px;
}
.resume_content_all .module_tit {
  position: absolute;
  left: -16px;
  top: 4px;
  min-width: 100px;
  padding: 0 30px;
  border-radius: 12px;
  height: 24px;
  line-height: 24px;
  font-size: 14px;
  font-weight: 700;
  background-color: #4e7282;
  color: #fff;
  white-space: nowrap;
  z-index: 2;
}
.basic_info_box {
  min-height: 102px;
  position: relative;
}
.basic_info_list {
  max-width: 580px;
  overflow: hidden;
}
.basic_info_list li {
  padding: 3px 0;
  float: left;
  width: 50%;
}
.basic_info_list li span {
  vertical-align: top;
  min-width: 60px;
  -moz-text-align-last: justify;
  text-align-last: justify;
  display: inline-block;
}
.resume_content .photo_box {
  position: absolute;
  right: 0;
  top: 50%;
  z-index: 3;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 108px;
  background-color: #fff;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
}
.resume_content .line_box2 {
  border-top: 2px solid #ddd;
  width: 100%;
  position: absolute;
  left: 0;
  top: 15px;
}
.resume_content .content_list .list_top {
  overflow: hidden;
  font-size: 14px;
}
.resume_content .content_list .list_top li {
  float: left;
  margin-right: 20px;
  line-height: 1.6;
  text-align: left;
  font-weight: 700;
}
.resume_content .content_list .list_top li:first-child {
  text-align: left;
  float: left;
  margin-left: 0;
  min-width: 160px;
}
.resume_content .content_list .list_top li.name {
  min-width: 220px;
  text-align: center;
  margin-left: 30px;
}
.resume_content .content_list .list_top li:last-child {
  min-width: inherit;
  margin-right: 0;
  float: right;
}
.resume_content .content_list .ql-editor {
  margin-top: 7px;
  color: #333;
  line-height: 1.62;
}
.ql-editor {
  box-sizing: border-box;
  line-height: 1.42;
  height: 100%;
  outline: none;
  overflow-y: auto;
  padding: 12px 15px;
  -o-tab-size: 4;
  tab-size: 4;
  -moz-tab-size: 4;
  text-align: left;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.page_line li {
  position: absolute;
  left: 0;
  top: 1150px;
  width: 100%;
  height: 18px;
  z-index: 2;
  font-size: 12px;
  background-color: #fff;
}
.print {
  color: #185abd;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  box-shadow: 0 0 20px rgb(0 0 0 / 20%);
  position: fixed;
  /* left: 50%; */
  right: -50px;
  top: 50%;
  margin-top: -40px;
  z-index: 1;
  /* margin-left: -40px; */
  background-color: #fff;
  cursor: pointer;
  text-align: center;
  line-height: 80px;
  font-size: 18px;
}
.print span{
  opacity: 0;
}
.print:hover span {
  opacity: 1;
}
.down_bg {
  background-image: linear-gradient(90deg, #1467cc 3%, #00c2ef);
  -webkit-transition: all .2s ease-out 0s;
  transition: all .2s ease-out 0s;
  width: 228px;
  line-height: 52px;
  border-radius: 26px;
  margin: 46px auto;
  color: #fff;
  text-align: center;
  font-size: 20px;
  cursor: pointer;
}
.btn_box {
  position: absolute;
  right: 0;
  top: 0;
}
.btn_box .btn_up {
  display: block;
  width: 58px;
  height: 28px;
  line-height: 28px;
  /* margin-top: 20px; */
  border: 1px solid #1467cc;
  border-radius: 14px;
  cursor: pointer;
  text-align: center;
  color: #1467cc;
  font-size: 14px;
}
.btn_box .btn_remove {
  display: block;
  margin-top: 10px;
  width: 58px;
  height: 28px;
  line-height: 28px;
  border: 1px solid #ff755d;
  border-radius: 14px;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  color: #ff755d;
}
.work-list {
  position: relative;
}
</style>

